<template>
  <div v-show="dataList.data.length>0" class="top-container">
    <ul class="data-list">
      <li v-for="item in dataList.data" :key="item.index" @click="tabsChange(item)"><el-tag effect="plain">{{ item }}</el-tag></li>
    </ul>
    <div class="btn-left"><i class="el-icon-arrow-left" @click="leftFn"/></div>
    <div class="btn-right"><i class="el-icon-arrow-right" @click="rightFn"/></div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'TopMenu',
  props: {
    dataList: {
      type: Object,
      default: function() {
        return { data: [] }
      }
    }
  },
  data() {
    return {
      data: []
    }
  },
  watch: {
    dataList: {
      handler(data) {
        data.data.forEach((item, index) => {
          if (item === data.selectName) {
            setTimeout(function() {
              $('.data-list li').eq(index).addClass('active')
            }, 300)
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.$nextTick(function() {
      $('.data-list li').eq(0).addClass('active')
      $('body').on('click', '.data-list li', function() {
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
      })
    })
  },
  methods: {
    leftFn() {
    },
    rightFn() {
    },
    tabsChange(data) {
      this.$emit('tabsChange', data)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.top-container{
  height: 50px;
  border:1px solid #E8E1E1;
  padding: 10px 30px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  .data-list{
    height: 28px;
    overflow: hidden;
    li{
      float: left;
      margin-right: 10px;
      cursor: pointer;
    }
    .active .el-tag{
      border-color: #C7E7F8;
      background: #C7E7F8;
    }
  }
  > div{
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 0px;
    color: #B4AEAE;
    font-size: 18px;
    background: #FFFFFF;
    i{
      cursor: pointer;
    }
  }
  .btn-left{
    left: 6px;
  }
  .btn-right{
    right: 0px;
    padding-right: 6px;
  }
}
</style>
